<template>
  <el-row>
    <el-col :span="24">
      <el-select  v-model="classList_sel" @change="ChangeStuList" filterable class="m-2" placeholder="Select" size="large">
        <el-option
            v-for="item in classList"
            :key="item"
            :label="item"
            :value="item"
        >
        </el-option>
      </el-select>
    </el-col>
  </el-row>
  <el-row>
    <el-table @select="selOne" @select-all="selAll" :data="currentStuList" style="width: 100%" max-height="250" ref="stuTable">
      <el-table-column type="selection" width="55"/>
      <el-table-column prop="StuInfo.StuNum" label="学号" width="150"/>
      <el-table-column prop="StuInfo.StuName" label="姓名" width="120"/>
      <el-table-column prop="StuInfo.StuClass" label="班级" width="120"/>
    </el-table>

  </el-row>
  <el-row>
    <el-button type="primary" @click="submit">提交</el-button>
  </el-row>
</template>

<script>
import axios from "axios";
export default {
  name: "ChangeStuBind",
  created() {

  },
  methods:{
    selOne(selection, row){
      for (const selectionElement of this.allStuMap.get(this.classList_sel)) {
        if (row.StuInfo.Id === selectionElement.StuInfo.Id){
          selectionElement.IfCheck=!selectionElement.IfCheck
        }
      }
    },
    selAll(val){
      if (val.length===0){
        for (const selectionElement of this.allStuMap.get(this.classList_sel)) {
          selectionElement.IfCheck=false
        }
      }else {
        for (const selectionElement of this.allStuMap.get(this.classList_sel)) {
          selectionElement.IfCheck=true
        }
      }
    },
    submit(){
      this.$parent.putdata(this.allStuMap)
      // this.allStuMap.forEach()
    },
    ChangeSel(val){
      // console.log(val)
    },

    setup(val){

      for (var valElement of val) {
        this.classList.push(valElement.ClassId)
        this.allStuMap.set(valElement.ClassId,valElement.StuListItem)
      }

      this.classList_sel = val[0].ClassId
      this.ChangeStuList(val[0].ClassId)

    },
    ChangeStuList(val){
      console.log("change page:",val)
      this.classList_sel = val
      this.currentStuList = this.allStuMap.get(val)
      for (var x of this.allStuMap.get(val)) {
        console.log(x)
        if (x.IfCheck){
          this.$refs.stuTable.toggleRowSelection(x, true)
        }
      }
    }
  },
  data(){
    return{
      classList:[],
      allStuMap:new Map(),
      classList_sel:'',
      currentStuList:[]
    }
  }
}
</script>

<style scoped>

</style>